<template>
  <el-dialog
    class="ba-operate-dialog"
    :close-on-click-modal="false"
    :model-value="modelValue"
    @close="closeForm"
  >
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']">
        指令下发
      </div>
    </template>
    <el-scrollbar class="ba-table-form-scrollbar">
      <div
        class="ba-operate-form ba-add-form"
        :style="'width: calc(100% - ' + state.labelWidth! / 2 + 'px)'"
      >
        <el-form
          ref="formRef"
          @keyup.enter="onAddSubmit(formRef)"
          :model="state.form"
          label-position="right"
          label-width="200px"
          :rules="rules"
        >
          <el-form-item label="设备编号" prop="code">
            <el-input v-model="state.form.code" disabled />
          </el-form-item>
          <el-form-item label="设备型号" prop="model">
            <el-input v-model="state.form.model" disabled />
          </el-form-item>
          <el-form-item label="时间戳" prop="flexem">
            <el-input v-model="state.form.flexem" disabled />
          </el-form-item>
          <FormItem
            label="是否联动"
            v-model="state.form.linkage"
            type="radio"
            :data="{
              content: { 1: '是', 0: '否' },
              childrenAttr: { border: true },
            }"
          />
          <el-form-item label="温度量程下限值" prop="lowtvalue">
            <el-input v-model="state.form.lowtvalue" disabled />
          </el-form-item>
          <el-form-item label="温度量程上限值" prop="uptvalue">
            <el-input v-model="state.form.uptvalue" disabled />
          </el-form-item>
          <el-form-item label="压差量程下限值" prop="lowpvalue">
            <el-input
              v-model="state.form.lowpvalue"
              placeholder="请确认是否设置压差量程下限值"
              disabled
            />
          </el-form-item>
          <el-form-item label="压差量程上限值" prop="uppvalue">
            <el-input
              v-model="state.form.uppvalue"
              placeholder="请确认是否设置压差量程上限值"
              disabled
            />
          </el-form-item>
          <el-form-item label="风速量程下限值" prop="lowfvalue">
            <el-input
              v-model="state.form.lowfvalue"
              placeholder="请确认是否设置风速量程下限值"
              disabled
            />
          </el-form-item>
          <el-form-item label="风速量程上限值" prop="upfvalue">
            <el-input
              v-model="state.form.upfvalue"
              placeholder="请确认是否设置风速量程上限值"
              disabled
            />
          </el-form-item>
          <el-form-item label="温度超温报警设定值" prop="tvalue">
            <el-input
              v-model="state.form.tvalue"
              placeholder="请确认是否设置温度超温报警值"
              disabled
            />
          </el-form-item>
          <el-form-item label="压差超压报警设定值" prop="pvalue">
            <el-input
              v-model="state.form.pvalue"
              placeholder="请确认是否设置压差超压报警值"
              disabled
            />
          </el-form-item>
          <!-- <el-form-item label="活性炭已使用时间" prop="longtime">
            <el-input
              v-model="state.form.longtime"
              placeholder="请确认设备是否激活"
              disabled
            />
          </el-form-item> -->
          <el-form-item label="活性炭更换时间设定" prop="periodoftime">
            <el-input v-model="state.form.periodoftime" disabled />
            <div class="block-help">初始化后自动获取该值</div>
          </el-form-item>
          <el-form-item label="活性炭提前提示更换时间设定" prop="prompt">
            <el-input v-model="state.form.prompt" disabled />
            <div class="block-help">初始化后自动获取该值</div>
          </el-form-item>
          <el-form-item label="命令队列名" prop="cmdname">
            <el-input
              v-model="state.form.cmdname"
              placeholder="请确认设备命令队列名"
              disabled
            />
          </el-form-item>
          <el-form-item label="处理风量" prop="volume">
            <el-input
              v-model="state.form.volume"
              placeholder="请确认设备处理风量"
              disabled
            />
          </el-form-item>
          <el-form-item label="碳板数量" prop="plates">
            <el-input
              v-model="state.form.plates"
              placeholder="请确认设备碳板数量"
              disabled
            />
          </el-form-item>
          <!-- <el-form-item label="活性炭激活日期" prop="cTime">
            <el-input
              v-model="state.form.cTime"
              placeholder="请确认设备是否初始化"
              disabled
            />
          </el-form-item>
          <el-form-item label="活性炭重量" prop="repalcenum">
            <el-input
              v-model="state.form.repalcenum"
              placeholder="请确认设备是否初始化"
              disabled
            />
          </el-form-item> -->
          <el-form-item label="维保链接" prop="code">
            <el-input v-model="state.form.link" disabled />
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div :style="'width: calc(100% - ' + state.labelWidth / 1.8 + 'px)'">
        <el-button @click="closeForm">取消</el-button>
        <el-button
          v-blur
          :loading="state.submitLoading"
          @click="onAddSubmit(formRef)"
          type="primary"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { ElNotification } from "element-plus"; //处理导航信息
import { Delete } from "@element-plus/icons-vue";
import { useAccess } from "@/store/backend/DeviceM/access";
import { useDeviceWarnSet } from "@/store/backend/DeviceM/warnSet";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { useLongRange } from "@/store/backend/DeviceM/longRange";
import { useCarbon } from "@/store/backend/EquipM/activeCarbon";
import baTable from "@/utils/baTable";

const access = useAccess();

type Item = {
  // eid: number; //设备id
  // ecode: string; //设定编号
  lowtvalue: string;
  uptvalue: string;
  uppvalue: string;
  lowpvalue: string;
  lowfvalue: string;
  upfvalue: string;
  linkage: number;
  tvalue: string;
  pvalue: string;
  // longtime: string; //设备活性炭设定值
  prompt: string;
  cmdname: string;
  flexem: number;
  periodoftime: number;
  volume: string;
  plates: string;
  cTime: string;
  repalcenum: number;
  code: string;
  model: string;
  link: string;
};
interface Props {
  modelValue: boolean;
}
const { proxy } = useCurrentInstance(); //mitt
const LR = useLongRange();
const carbon = useCarbon();

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
});

const emits = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
}>();

const closeForm = () => {
  emits("update:modelValue", false);
};

const formRef = ref<FormInstance>();
const rules = reactive<FormRules>({});
const state: {
  labelWidth: number;
  submitLoading: boolean;
  form: Item;
} = reactive({
  labelWidth: 160,
  submitLoading: false,
  form: {
    // eid: 0, //设备id
    // ecode: "", //设定编号
    link: "", //环保设备维保信息链接
    lowtvalue: "",
    uptvalue: "",
    uppvalue: "",
    lowpvalue: "",
    lowfvalue: "",
    upfvalue: "",
    linkage: 0,
    tvalue: "",
    pvalue: "",
    // longtime: "", //设备活性炭设定值
    prompt: "",
    cmdname: "",
    flexem: 0,
    periodoftime: 0,
    plates: "",
    cTime: "",
    repalcenum: 0,
    code: "",
    model: "",
    volume: "",
  },
});

const onAddSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      LR.orderData({ ...state.form, createtime: state.form.cTime }).then(
        (res: any) => {
          closeForm();
          //刷新设备列表页面
          proxy.eventBus.emit("afterOrderRefresh");
        }
      );
    } else {
      console.log("zhi!", fields);
      ElNotification({
        type: "warning",
        message: "指令下发失败，请检查配置是否完成",
      });
    }
  });
};

proxy.eventBus.on("order", (data: any) => {
  console.log("order", data);
  state.form = data;
  console.log("state.form", state.form);
  // state.form.ecode = data.gatewaycode; //网关编号
  // getNewActiveCarbon(data.id);
});

// 获取活性炭最新设定数据
// const getNewActiveCarbon = (filter: any) => {
//   carbon.getCarbonItemById(filter).then((res: any) => {
//     console.log("指令通过id获取数据", res);
//     state.form.lifeValue = res.rows[0].lifeValue;
//   });
// };

onMounted(() => {});
onBeforeUnmount(() => {
  proxy.eventBus.off("order");
});
</script>

<style scoped lang="scss">
.add-item-content {
  display: none;
}
.el-scrollbar {
  overflow: auto;
  position: relative;
  height: 100%;

  .el-scrollbar__wrap {
    overflow: auto;
    height: 100%;
  }
}
</style>
